<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../css/mobileSelect.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../js/layer_mobile/need/layer.css">
    <link rel="stylesheet" href="../css/main.css">

    <script src="../js/mobileSelect.min.js"></script>
    <script src="../js/layer_mobile/layer.js"></script>

    <title></title>
<!--
    <style>
        html, body {
            height: 100%;
            width: 100%;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei";
        }

        /*按钮样式*/
        .mui-switch {
            width: 52px;
            height: 31px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #fdfdfd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 20px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }

        .mui-switch:before {
            content: '';
            width: 29px;
            height: 29px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }

        .mui-switch:checked {
            border-color: #fd5454; /*颜色修改*/
            box-shadow: #fd5454 0 0 0 16px inset; /*颜色修改*/
            background-color: #fd5454;
        }

        .mui-switch:checked:before {
            left: 21px;
        }

        .mui-switch.mui-switch-animbg { /*加过度效果*/
            transition: background-color ease 0.4s;
        }

        .mui-switch.mui-switch-animbg:before {
            transition: left 0.3s;
        }

        .mui-switch.mui-switch-animbg:checked {
            box-shadow: #fd5454 0 0 0 0 inset; /*颜色修改*/
            background-color: #fd5454;
            transition: border-color 0.4s, background-color ease 0.4s;
        }

        .title-address {
            position: fixed;
            top: 0;
            width: 100%;
            height: 45px;
            letter-spacing: 5px;
            margin-bottom: 2px;
        }

        .title-address div {
            height: 100%;
            float: left;
            text-align: center;
            line-height: 45px
        }

        .title-address .menu a{
            display: inline-block;
            height:45px ;
            width: 45px;

        }
        .title-address .address-return{
            background: url("../images/return.png") left no-repeat;background-size: 30%;
            }
        .title-address .address-close{
            background: url("../images/close.png") left no-repeat;background-size: 40%;
        }


        .address .address-lists {
            width: 100%;
        }

        .address .address-lists li {
            display: flex;
            justify-content: space-between;
            padding-right: 10px;
            line-height: 2;
        }

        a {
            text-decoration: none;
        }

        .footer {
            width: 100%;
            height: 18vw;
            bottom: 0;
            background: #FFF;
            z-index: 111;
            display: flex;
            justify-content: space-evenly;
        }

        .footer a {
            width: 42%;
            text-align: center;
            font-size: 22px;
            margin: 2vw 0;
            line-height: 14vw;
            border-radius: 5px;
        }

        .footer #return {
            color: #B3B3B3;
            border: 1px solid #B3B3B3;
        }

        .footer #save {
            color: white;
            background: #e63e58;
        }

        .address  .address-lists {
            background: white;
        }

        .address .address-lists li {
            font-size: 20px;
            margin-left: 20px;
            border-bottom: 1px solid #DCDCDC;
        }

        .address .address-lists li > input {
            line-height: 45px;
            font-size: 20px;
            border: 0
        }

        .address .address-lists li textarea {
           font-size: 20px;
            border: 0
        }

        #trigger5 {
            width: 100%;
        }

       .address .address-lists .right {
            background: url(../images/right.png) no-repeat right;
            background-size: 43%;
            width: 45px;
            height: 45px
        }
    </style>
-->
</head>
<body>
<div class="title-address">
    <div class="menu" style="width: 35%">
        <a href="javascript:void(0)" class="address-return"></a>
        <a href="javascript:void(0)" class="address-close"></a>
    </div>
    <div style="font-size: 22px;width: 30%">商品惠</div>
</div>
<div style="height: 50px"></div>
<div class="address">
    <form id="addAddress">
        <ul class="address-lists">
            <li>
                <input id="receiverName" type="text" placeholder="收货人姓名">
            </li>
            <li>
                <input id="phoneNumber" type="tel" maxlength="11" placeholder="手机号">
            </li>
            <li>
                <div id="trigger5" style="line-height: 45px">省市区</div>
                <div class="right" style=""></div>
                <input type="hidden" id="ssq" value="" required>
            </li>
            <li style="padding: 5px 10px;">
                <textarea name="" id="detailedAddress" cols="30" rows="4" placeholder="详细地址（街道小区门牌号）"
                          required></textarea>
            </li>
            <li>
                <span style="font-size:20px;line-height: 50px;">设为默认</span><label class="btn" style="    margin-top: 10px;
"><input style="line-height: 45px" class="mui-switch mui-switch-animbg" type="checkbox"></label>
            </li>

        </ul>
    </form>

    <div style="height: 10vw"></div>
</div>
<div class="footer ">
    <a href="from.html" id="return">返回</a> <a href="javascript:void(0)" id="save">保存</a>
</div>
<!--<label class="btn"><input class="mui-switch mui-switch-animbg" type="checkbox" checked="checked"></label>-->

<script src="../js/jquery.min.js"></script>
<script>

    $(function () {
        $('.address-return').click(function(){
            history.go(-1)
        })
        $('.right').click(function () {
            $('#trigger5').click()
        })
        $('#save').click(function () {
            if ($('#receiverName').val() === '') {
                msg('请输入姓名！')
                return false
            }
            if ($('#phoneNumber').val() === '') {
                msg('请输入电话！')
                return false
            }
            if ($('#ssq').val() === '') {
                msg('请选择省市信息！')
                return false
            }
            if ($("#detailedAddress").val() === '') {
                msg('请输入详细地址！')
                return false
            }
            $('#addAddress').submit()
        })

        function msg(msg) {  //弹窗设置
            layer.open({
                content: msg
                , skin: 'msg'
                , time: 2 //2秒后自动关闭
                , style: 'border:none; color:#fff;',
            });
        }
    })
</script>
<script type="text/javascript">

    var UplinkData =
        [
            {id: '1', value: '兰博基尼'},
            {
                id: '2',
                value: '劳斯莱斯',
                childs: [
                    {
                        id: '1',
                        value: '曜影'
                    },
                    {
                        id: '2',
                        value: '幻影',
                        childs: [
                            {
                                id: '1',
                                value: '标准版'
                            },
                            {
                                id: '2',
                                value: '加长版'
                            },
                            {
                                id: '3',
                                value: '巅峰之旅'
                            },
                            {
                                id: '4',
                                value: '流光熠世'
                            },
                            {
                                id: '5',
                                value: '都会典藏版'
                            }
                        ]
                    },
                    {
                        id: '3',
                        value: '古思特',
                        childs: [
                            {
                                id: '1',
                                value: '加长版'
                            },
                            {
                                id: '2',
                                value: '永恒之爱'
                            },
                            {
                                id: '3',
                                value: '英骥'
                            },
                            {
                                id: '4',
                                value: '阿尔卑斯典藏版'
                            }
                        ]
                    },
                    {
                        id: '4',
                        value: '魅影',
                        childs: [
                            {
                                id: '1',
                                value: '标准版'
                            },
                            {
                                id: '2',
                                value: 'Black Badge'
                            }
                        ]
                    }
                ]
            },
            {
                id: '3',
                value: '宾利',
                childs: [
                    {
                        id: '1',
                        value: '慕尚',
                        childs: [
                            {
                                id: '1',
                                value: '标准版'
                            },
                            {
                                id: '2',
                                value: '极致版'
                            }
                        ]
                    },
                    {
                        id: '2',
                        value: '欧陆',
                        childs: [
                            {
                                id: '1',
                                value: '尊贵版'
                            },
                            {
                                id: '2',
                                value: '敞篷标准版'
                            },
                            {
                                id: '3',
                                value: '敞篷尊贵版'
                            }
                        ]
                    }
                ]
            },
            {
                id: '4',
                value: '法拉利',
                childs: [
                    {
                        id: '1',
                        value: 'LaFerrari'
                    },
                    {
                        id: '2',
                        value: '法拉利488'
                    },
                    {
                        id: '3',
                        value: 'GTC4Lusso'
                    }
                ]
            },
            {
                id: '5',
                value: '玛莎拉蒂',
                childs: [
                    {
                        id: '1',
                        value: '总裁'
                    },
                    {
                        id: '2',
                        value: '玛莎拉蒂GT'
                    },
                    {
                        id: '3',
                        value: 'Levante'
                    }
                ]
            }
        ];


    //----------------------------------------------------------
    //更多参数详情可查看文档 https://github.com/onlyhom/mobileSelect.js

    /**
     * 参数说明
     * @param trigger(必填参数) 触发对象的id/class/tag
     * @param wheels(必填参数)  数据源,需要显示的数据
     * @param title 控件标题
     * @param position 初始化定位
     * @param callback 选择成功后触发的回调函数，返回indexArr(选中的选项索引)、data(选中的数据)
     * @param transitionEnd 每一次手势滑动结束后触发的回调函数,返回indexArr(当前选中的选项索引)、data(选中的数据)
     * @param keyMap 字段名映射
     */

    /**
     * 函数说明(实例化之后才可用)
     * @function setTitle()      参数 string                 设置控件的标题
     * @function updateWheel()   参数 sliderIndex, data      重新渲染指定的轮子(可用于先实例化，后通过ajax获取数据的场景)
     * @function updateWheels()  参数 data                   重新渲染所有轮子,仅限级联数据格式使用(可用于先实例化，后通过ajax获取数据的场景)
     * @function locatePostion() 参数 sliderIndex, posIndex  传入位置数组，重定位轮子的位置
     * @function show()          参数 无参                   唤起弹窗组件
     * @function getValue()      参数 无参                   获取组件选择的值
     */

    var mobileSelect5 = new MobileSelect({
        trigger: '#trigger5',
        title: '地址选择',
        wheels: [
            {data: UplinkData}
        ],
        transitionEnd: function (indexArr, data) {  //滚动暂停时的数据
            console.log(data);
        },
        callback: function (indexArr, data) { //点击确认后的数据
            console.log(data);
            var ssq = ''
            for (var i = 0; i < data.length; i++) {
                ssq += data[i].value
            }
            $('#ssq').val(ssq)
        }
    });
</script>
</body>
</html>
